<template>
  <!--富文本编辑器-->
  <div>
      <div id="div1" style="text-align: left" ></div>
  </div>
</template>
<script>
import E from 'wangeditor'
import {getCookie} from '../../utils/api'
export default {


  mounted() {
    this.editor = new E('#div1')
    this.editor.config.uploadImgServer = '/api/file_upload/upload2bt'


    this.editor.config.uploadImgHeaders = {"Authorization":getCookie('Authorization')}
    this.editor.config.uploadFileName="myFile"
    this.editor.config.uploadImgMaxSize = 20 * 1024 * 1024; // 将图片大小限制为 3M
    // 配置 server 接口地址
    this.editor.config.uploadVideoServer = '/api/file_upload/upload2btVideo'
    this.editor.config.uploadVideoName="myFile"
    console.log('---getCookie(Authorization',getCookie('Authorization'))
    this.editor.config.uploadVideoHeaders = {"Authorization":getCookie('Authorization')}
    this.editor.config.uploadVideoHooks={
      // 上传完成处理方法
      fail: (xhr, editor, result) => {
        // 插入图片失败回调
      },
      success: (xhr, editor, result) => {
        // 图片上传成功回调
      },
      timeout: (xhr, editor) => {
        // 网络超时的回调
      },
      error: (xhr, editor) => {
        // 图片上传错误的回调
        console.log('err--->', xhr)
      },
      customInsert: function (insertVideo, result) {
        console.log('result--->', result)
        const link = result.fileUrl
        insertVideo(link)
      }
    }


    this.editor.config.uploadImgHooks = {
      before : function(xhr, editor, files) {

      },
      success : function(xhr, editor, result) {
        console.log("上传成功");
      },
      fail : function(xhr, editor, result) {
        console.log("上传失败,原因是"+result);
      },
      error : function(xhr, editor) {
        console.log("上传出错");
      },
      timeout : function(xhr, editor) {
        console.log("上传超时");
      },
      customInsert: function (insertImg, result, editor){
        const url = result.fileUrl;
        insertImg(url);
        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }



    this.editor.create()
    //子组件中：
    this.editor.config.onchange = (html,) => {
      //把获取的内容传给父组件
      this.$emit('catchData',{"html":html,"text":this.editor.txt.text()});
    };
  },
  data() {
    return {
      editor: '',
      value:'',
      editorOption: {
        placeholder: '请输入院校简介',
        theme: 'snow',
        modules: {}
      }
    }

  },
  methods: {
    getData() {
      console.log(this.editor.txt.html())
    }
  }

}
</script>

<style>
.w-e-menu {
  z-index: 0 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}

.w-e-toolbar {


}

</style>